<template>
  <div>
    <a-modal
        :destroyOnClose="true"
        :visible="this.modalVisible"
        :title="this.modalTitle"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-form :form="form">
        <a-form-item
            label="模型标签"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input
              v-decorator="['label', {
                                rules: [{ required: true, message: '请输入模型名！' }]
                            }]"
              allowClear
              placeholder="input search text"
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            v-if="this.modalTitle != '重命名'"
            label="模板"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-select
              v-decorator="['template',{
                rules: [{ required: true, message: '请输入模型名！' }]
              }]"
              style="width: 80%"
          >
            <a-select-option value="false">
              新建模板
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex'

export default {
  name: "ModelPopup",
  computed: {
    ...mapState('modelManage', ['modalVisible', 'modalTitle'])
  },
  data() {
    return {
      form: this.$form.createForm(this)
    }
  },
  methods: {
    ...mapMutations('modelManage', ['setState']),
    ...mapActions('modelManage', ['addModel', 'queryModelList', 'rename']),
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.modalTitle == '重命名') {
            this.rename(values).then(() => {
              this.setState({name: 'modalVisible', value: false})
              this.queryModelList()
            })
          } else {
            this.addModel(values).then(() => {
              this.setState({name: 'modalVisible', value: false})
              this.queryModelList()
            })
          }
        }
      });
    },
    handleCancel() {
      this.setState({name: 'modalVisible', value: false})
    }
  }
}
</script>

<style scoped>

</style>
